<template>
  <div>
  <router-view />
  <van-tabbar route :placeholder='true'
   v-if="$route.meta.showTabbar"
   active-color='#21A19C' v-model="active">
    <van-tabbar-item v-for="(item, index) in state.list" :key="index" :to="item.to">
      <span>{{ item.title }}</span>
      <template #icon="props">
        <img :src="props.active ? `${item.active}` : `${item.inactive}`" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</div>
</template>

<style lang="less">
*{
  margin: 0;
  padding: 0;
}
.flex_r {
  display: flex;

  // align-items: center;
  // justify-content: space-between;
}

.flex_c_b {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.font14 {
  font-size: 28px;
}
</style>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
const active = ref(0);
const state = reactive({
  list: [{
    title: '主页',
    to: '/',
    active: require('@/assets/icon/icon_on_home.png'),
    inactive: require('@/assets/icon/icon_home.png')
  }, {
    title: '订单',
    to: '/order',
    active: require('@/assets/icon/icon_on_order.png'),
    inactive: require('@/assets/icon/icon_order.png')
  }, {
    title: '我的',
    to: '/my',
    active: require('@/assets/icon/icon_on_my.png'),
    inactive: require('@/assets/icon/icon_my.png')
  }]
})
</script>
